<template>
  <t-space direction="vertical">
    <h3>尝试使用table展开更多</h3>
    <t-table
        :data="tableList"
        :columns="columns"
        cell-empty-content="-"
        resizable lazy-load
        table-layout="auto"
        stripe
        :expanded-row-keys="expandedRowKeys"
        :expanded-row="expandedRow"
        :expand-on-row-click="expandOnRowClick"
        :expand-icon="expandIcon"
    > <!--        点开扩展信息-->
      <template #operate="{ row }">
        <t-link hover="color" theme="primary" @click="rehandleClickOp(row)">
          {{ row.status === 0 ? '查看详情' : '再次申请' }}
        </t-link>
      </template>
      <template #expandedRow="{ row }">
        <div class="more-detail">
          <p class="title"><b>ID:</b></p>
          <p class="content">{{ row.id }}</p>
          <br />
          <p class="title"><b>管理员:</b></p>
          <p class="content">{{ row.applier_full_name }}</p>
        </div>
      </template>

    </t-table>
  </t-space>

</template>
<script lang="ts" setup>
import { ref, watch, computed,onMounted } from 'vue';
import { TableProps, TableRowData } from 'tdesign-vue-next';
const fetchLoadingStatus = ref(false)
let tableList = ref([
  {
    "id": 1,
    "applier": "karlmfan",
    "applier_full_name": "karlmfan(范铭)",
    "data_range": [
      "访客"
    ],
    "data_time": [
      "2023-11-06",
      "2023-11-06"
    ],
    "data_file": [
      "无效CashRegister存档.xlsx"
    ],
    "temp_base64": [],
    "data_desc": "test",
    "download_file": "",
    "status": 4,
    "order_no": "83365731-6053-4cb5-8349-c159b1039c76",
    "create_time": "2023-10-18"
  },
  {
    "id": 2,
    "applier": "karlmfan",
    "applier_full_name": "karlmfan(范铭)",
    "data_range": [
      "会议室",
      "餐饮"
    ],
    "data_time": [
      "2023-10-18",
      "2023-11-19"
    ],
    "data_file": [
      "微卡商户树_20230927.xlsx"
    ],
    "temp_base64": [],
    "data_desc": "内部审核",
    "download_file": "",
    "status": 5,
    "order_no": "5b033557-fae5-4d7a-9f4a-474db3de6453",
    "create_time": "2023-10-18"
  }
])
const columns = ref([
  // { colKey: 'order_no', title: '订单号', width: "150px" },
  { colKey: 'applier_full_name', title: '申请人' },
  { colKey: 'data_range', title: '数据范围', },
  { colKey: 'data_time', title: '时间范围' },
  { colKey: 'status', title: '状态' },
  { colKey: 'create_time', title: '申请时间' },
  // { colKey: 'data_desc', title: '申请说明' },
  { colKey: 'operate', title: '操作' },
]);

onMounted(() => {
})

// 扩展按钮
// const expandedRowKeys = ref<TableProps['expandedRowKeys']>(['2']);
const expandedRowKeys = ref([
  {colKey: 'id', title: 'ID' },
  {colKey: 'applier_full_name', title: '申请人' },
])
// const expandedRow = ref<TableProps['expandedRow']>(['2'])
const expandedRow = ref([
  {
    id:1,applier_full_name:"王五"
  },{
    id:2,applier_full_name:"赵四"
  }
])
const expandIcon = ref<TableProps['expandIcon']>(true);
const expandOnRowClick = ref(true);
const rehandleClickOp = ({ text, row }: TableRowData) => {
  console.log(text, row);
};

const expandColumns = ref([
  {colKey: 'id', title: 'ID' },
  {colKey: 'applier_full_name', title: '申请人' },
])
const expandData = ref([
  {
    id:1,applier_full_name:"王五"
  },{
    id:2,applier_full_name:"赵四"
  }
])

</script>